<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr>

    <!-- 访问子模块里的state的语法是： $store.state.模块名.数据  -->
    <p>cartList 值：{{ $store.state.cart.cartList }}</p>
    <p>cartList 值：{{ cartList }}</p>
    <button @click="fn1" class="btn btn-primary">修改购物车</button>
    <button @click="fn2" class="btn btn-primary">调用add</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Left',
  computed: {
    // 默认只能简化根里的state
    // ...mapState(['cartList'])
    // 如果需要访问子模块里的要有两个参数
    // 参数1：模块名，参数2：要映射的数据列表
    ...mapState('cart', ['cartList'])
  },

  methods: {
    fn1 () {
      this.$store.commit('setCartList', [10,20,30])
    },

    fn2 () {
      // 默认情况下所有模块的add都调用
      // this.$store.commit('add')
      // 我现在只想调用cart模块里的add
      this.$store.commit('cart/add')
    }
  }
}
</script>

<style>
</style>
